<template>
	<view class="service-detail__-content">
		<view class="head-content">
			<view class="item item-after">
				<view class="iconfont icondui" :class="'active'"></view>
				<view class="text" :class="'active'">提交申请</view>
			</view>
			<view class="item item-after">
				<view class="iconfont icondui"></view>
				<view class="text">进行中</view>
			</view>
			<view class="item">
				<view class="iconfont icondui"></view>
				<view class="text">完成</view>
			</view>
		</view>
		<view class="time-title">
			<view>
				<view class="title">您的服务单已申请成功,等待售后处理</view>
				<view class="time">2021-02-06 16:02</view>
			</view>
			<view class="iconfont iconright"></view>
		</view>
		<view class="return-price">
			<view class="p-title">退款总额</view>
			<view class="price">￥999</view>
			<view class="p-type">未退款</view>
		</view>
		<view class="commodity-content">
			<image src=""></image>
			<view class="commodity">
				<view class="title">五年高考三年模拟五年高考三年模拟五年高考三年模拟五年高考三年模拟五年高考三年模拟五年高考三年模拟</view>
				<view class="stitle">19年,高三</view>
				<view class="price-sold">
					<view class="price">￥999</view>
					<view class="sold">x1</view>
				</view>
			</view>
		</view>
		<view class="commodity-content">
			<image src=""></image>
			<view class="commodity">
				<view class="title">五年高考三年模拟五年高考三年模拟五年高考三年模拟五年高考三年模拟五年高考三年模拟五年高考三年模拟</view>
				<view class="stitle">19年,高三</view>
				<view class="price-sold">
					<view class="price">￥999</view>
					<view class="sold">x1</view>
				</view>
			</view>
		</view>
		<view class="commodity-content">
			<image src=""></image>
			<view class="commodity">
				<view class="title">五年高考三年模拟五年高考三年模拟五年高考三年模拟五年高考三年模拟五年高考三年模拟五年高考三年模拟</view>
				<view class="stitle">19年,高三</view>
				<view class="price-sold">
					<view class="price">￥999</view>
					<view class="sold">x1</view>
				</view>
			</view>
		</view>
		<view class="message-content">
			<view class="item">
				<view class="title">服务单号：</view>
				<view class="numbr">202103543956905775024420</view>
				<view class="operator" @click="setClipboard">复制</view>
			</view>
			<view class="item">
				<view class="title">申请时间：</view>
				<view class="numbr">2021-02-06 16:02</view>
			</view>
			<view class="item">
				<view class="title">售后类型：</view>
				<view class="numbr">退款</view>
			</view>
		</view>
		<view class="cancle-btn">
			<view class="cancle">
				取消
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			// 复制到剪切板
			setClipboard() {
				uni.setClipboardData({
					data: '202103543956905775024420',
					success() {
						this.util.showDialog('复制成功')
					}

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.service-detail__-content {
		padding-top: 172upx;
		padding-bottom: 132upx;
		.head-content {
			width: 100%;
			height: 300upx;
			position: absolute;
			top: 0;
			box-sizing: border-box;
			background: linear-gradient(91deg, #47B848 0%, #69BE43 49%, #84C440 100%);
			opacity: 1;
			display: flex;
			justify-content: space-around;
			z-index: 1;

			.item {
				margin-top: 34upx;
				position: relative;
				text-align: center;
				width: 200upx;

				.icondui {
					font-size: 42upx;
					color: #FFFFFF;
					opacity: 0.4;
				}

				.text {
					margin-top: 10upx;
					color: #FFFFFF;
					font-size: 28upx;
					opacity: 0.4;
				}

				.active {
					opacity: 1;
				}
			}

			.item-after:after {
				content: '';
				position: absolute;
				width: 170upx;
				height: 4upx;
				top: 21upx;
				left: 140upx;
				background-color: #FFFFFF;
				opacity: 0.7
			}
		}

		.time-title {
			width: 100%;
			height: 140upx;
			position: relative;
			z-index: 9;
			box-sizing: border-box;
			border-radius: 10upx 10upx 0 0;
			background-color: #FFFFFF;
			padding: 30upx;
			display: flex;
			justify-content: space-between;

			.title {
				color: #333333;
				font-size: 28upx;
			}

			.time {
				font-size: 24upx;
				color: #999999;
				margin-top: 24upx;
			}

			.iconright {
				line-height: 70upx;
				color: #999999;
			}
		}

		.return-price {
			padding: 30upx;
			width: 100%;
			background-color: #FFFFFF;
			margin-top: 20upx;
			display: flex;
			box-sizing: border-box;

			view {
				font-size: 28upx;
			}

			.p-title {
				color: #333333;
			}

			.price {
				margin-left: 20upx;
			}

			.p-type {
				margin-left: auto;
				color: #E43841;
			}
		}

		.commodity-content {
			display: flex;
			padding: 30upx;
			background-color: #FFFFFF;
			margin-top: 20upx;

			image {
				width: 180upx;
				height: 180upx;
				background-color: #FAFAFA;
			}

			.commodity {
				margin-left: 20upx;
				width: calc(100% - 200upx);

				.title {
					overflow: hidden; //将超出的部分隐藏
					text-overflow: ellipsis; //超出部分用省略号显示
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					font-size: 28upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					opacity: 1;
				}

				.stitle {
					font-size: 24upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					opacity: 1;
					margin: 10upx 0;
				}

				.price-sold {
					display: flex;
					justify-content: space-between;

					.price,
					.sold {
						font-size: 28upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						line-height: 40upx;
						color: #333333;
						opacity: 1;
					}

					.sold {
						color: #CDCDCD;
					}
				}
			}
		}

		.message-content {
			padding: 30upx;
			margin-top: 20upx;
			background-color: #FFFFFF;

			.item {
				display: flex;
				margin-top: 30upx;

				.title {
					font-size: 28upx;
					color: #333333;
				}

				.numbr {
					font-size: 28upx;
					color: #999999;
				}

				.operator {
					margin-left: auto;
					color: #AE7A1F;
					font-size: 24upx;
				}
			}

			.item:first-child {
				margin-top: 0;
			}
		}
		.cancle-btn{
			position: fixed;
			bottom: 0;
			width: 100%;
			padding: 20upx 30upx;
			background-color: #FFFFFF;
			box-sizing: border-box;
			.cancle {
				width: 116upx;
				height: 60upx;
				text-align: center;
				line-height: 60upx;
				margin-left: auto;
				background-color: #E7E7E7;
				border-radius: 30upx;
				font: 28upx;
				color: #666666;
			}
		}
	}
</style>
